<!--  -->
<script setup>
import { ref, reactive, computed } from "vue";
import { NCarousel } from "naive-ui";

const props = defineProps({
  list: {
    type: Array,
    default: [],
  },
  bannerImg: {
    type: Array,
    default: [],
  },
});

// 获取当前分类逻辑
const categoryId = ref(null);
const currCategory = computed(() => {
  return props.list.find((item) => item.id === categoryId.value);
});
</script>

<template>
  <n-carousel show-arrow autoplay>
    <img
      class="carousel-img"
      v-for="item in props.bannerImg"
      :key="item.id"
      v-lazy="item.imgUrl"
    />
    <template #arrow="{ prev, next }">
      <div class="custom-arrow">
        <button type="button" class="curtom-arrow--left" @click="prev">
          <i class="iconfont icon-left"></i>
        </button>
        <button type="button" class="curtom-arrow--right" @click="next">
          <i class="iconfont icon-right"></i>
        </button>
      </div>
    </template>
  </n-carousel>
  <div class="home-category">
    <ul class="menu" v-if="list.length > 3">
      <li
        v-for="item in props.list"
        :key="item.id"
        @mouseenter="categoryId = item.id"
      >
        <RouterLink :to="`/category/${item.id}`">{{ item.name }}</RouterLink>
        <template v-if="item.children">
          <RouterLink
            v-for="sub in item.children"
            :key="sub.id"
            :to="`/category/sub/${sub.id}`"
            >{{ sub.name }}</RouterLink
          >
        </template>
      </li>
    </ul>
    <!-- 弹层 -->
    <div class="layer">
      <h4>
        推荐
        <small>根据您的购买或浏览记录推荐</small>
      </h4>
      <ul
        v-if="currCategory && currCategory.goods && currCategory.goods.length"
      >
        <li
          v-for="item in currCategory.goods"
          :key="item.id"
          :title="item.name"
        >
          <RouterLink :to="`/product/${item.id}`">
            <img v-lazy="item.picture" />
            <div class="info">
              <p class="name ellipse">{{ item.name }}</p>
              <p class="desc ellipse">{{ item.desc }}</p>
              <p class="price">
                <i>¥ {{ item.price }}</i>
              </p>
            </div>
          </RouterLink>
        </li>
      </ul>
      <ul v-if="currCategory && currCategory.brands">
        <li class="brand" v-for="item in currCategory.brands" :key="item.id">
          <RouterLink to="/">
            <img v-lazy="item.picture" :title="item.name" />
            <div class="info">
              <p class="place">
                <i class="iconfont icon-dingwei"></i>
                {{ item.place }}
              </p>
              <p class="name ellipse">{{ item.name }}</p>
              <p class="desc ellipse2">{{ item.desc }}</p>
            </div>
          </RouterLink>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang='less' scoped>
@import url("@/assets/style/home.less");
</style>